<template>
  <div ref="wrapper">
    <div class="content" ref="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import bs from 'better-scroll'
  export default {
    props:{
      data:{
        type:Array,
        default(){
          return []
        }
      },
      probeType:{
        type:Number,
        default:0
      },
      pullUpLoad:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return {
        bs:null
      }
    },
    mounted(){
      /* Better-Scroll的实例有scrollerHeihgt属性它可以决定多少区域可以滚动
scrollerHeight属性值时Better-Scroll里的content中的子组件的高度
当子组件中的图片在网络请求到地址后，渲染的时间超过scrollerHeight属性计算出值的时间
scrollerHeight的值没有讲图片高度计算在内，就会造成页面无法滑动( 滑动过程中卡顿 )
后来在图片加载出来后，而scrollerHeight的值并没有进行更新
*/
      this.bs = new bs(this.$refs.wrapper,{
        click:true,
        probeType:this.probeType,
        pullUpLoad:this.pullUpLoad,
        // 解决滚动区域不能正确获取content高度的问题
        observeDOM: true,
        observeImage: true
      })
      // 监听滚动的位置
      this.bs.on('scroll',(position)=>{
        //向外发送事件
        this.$emit('scroll',position)
      })
      // 监听上拉加载
      if(this.pullUpLoad){
        this.bs.on('pullingUp',()=>{
          this.$emit('pullMore')
        })
      }

      // 防抖函数返回的 函数用db接收
      // let db = this.debounce(()=>{
      //    this.refresh()
      // },500)
      // // 方法 1 监听goodsItem图片是否加载完成 放在这个生命周期函数里是因为dom已经渲染完成
      // this.$bus.$on('hasLoaded',()=>{
      //   //执行返回的函数
      //   db()
      // //图片加载完成后 吊用这个方法  重新计算，保证滚动效果正常
      //
      // })


    },
    methods:{
      // refresh() {
      //         // 代理better-scroll的refresh方法
      //         this.bs && this.bs.refresh()
      // },
      // // //防抖函数 debounce
      // debounce(func,delay){
      //   // 用于记录 timer是否已被创建
      //   let timer = null
      //   // 返回一个匿名函数 形成闭包 保持对timer的引用
      //   // ...args 用于接收一个或多个参数
      //   return function(...args){
      //     // 判断 timer 是否存在，如果是则 清空定时器
      //     if(timer) clearTimeout(timer)
      //     // 清空定时器 后重新 再创建一个定时器
      //     timer = setTimeout(()=>{
      //       func.apply(this,args)
      //     },delay)
      //   }
      // }
    },
    // 方法 2
    // updated(){
    //   //监听数据发生化，页面重绘，则调用refresh方法重新计算，保证滚动效果正常
    //   console.log('x')
    //   this.refresh()
    // }
   // 方法 3
    // watch:{
    //   data(){
    //     //监听数据发生化，页面重绘，则调用refresh方法重新计算，保证滚动效果正常
    //     console.log('x')
    //     this.$nextTick(()=>{
    //       this.refresh()
    //     })

    //   }
    // }
  }
</script>

<style scoped>

</style>
